<template>
  <view class="page">
    <view class="top">
      <image :src="ImgRegisterColor" mode="widthFix" />
    </view>
    <view class="card">
      <view class="title"> 上传头像 </view>
      <view class="margin-top">
        <button
          class="u-reset-button"
          open-type="chooseAvatar"
          @chooseavatar="useChooseavatar"
          @longtap="previewImage"
        >
          <up-image
            :src="params.avatar"
            shape="circle"
            width="100rpx"
            height="100rpx"
          >
          </up-image>
        </button>
      </view>
      <view class="title required margin-top">用户昵称</view>
      <view class="row">
        <input
          v-model="params.nickname"
          type="nickname"
          placeholder="请输入用户昵称"
          @change="getNickName"
        />
      </view>
      <view class="title">手机号</view>
      <view class="row">
        <button
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="vx_btn"
        >
          手机号
        </button>
      </view>
      <view class="btn margin-top-lg" @tap="onSub">提交</view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import BasicConfig from "../../utils/config";
import { useAfterRead, useDeletePic } from "@/hooks/useUpload";
import { useUploadFilePromise } from "../../hooks/useUpload";
import { useLogin, useWechatLogin } from "../../hooks/useLogin";
import { ImgRegisterColor } from "../../utils/iconMap";
const $data = reactive({
  tops: "",
});
const params = reactive({
  telCode: "",
  nickname: "",
  avatar: "",
});
const getNickName = (e) => {
  params.nickname = e.detail.value;
};
// 用户头像
const useChooseavatar = async (e) => {
  const path = e.detail.avatarUrl;
  useUploadFilePromise(path, { user: "test", key: "file" }).then((res) => {
    BasicConfig.toast(res.msg);
    if (res.code === 200) {
      params.avatar = res.url;
    }
  });
};
const previewImage = () => {
  if (params.url) return;
  const url = params.url;
  uni.previewImage({
    urls: [url],
  });
};
const getPhoneNumber = async (e) => {
  params.telCode = e.detail.code;
};
const onSub = () => {
  if (!uni.$u.test.mobile(params.phone)) {
    BasicConfig.toast("请输入正确格式手机号");
    return;
  }
  uni.showModal({
    title: "提示",
    content: "确认提交?",
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        await useWechatLogin();
        await useLogin(params);
      }
    },
  });
};
onLoad(async () => {});
</script>

<style lang="scss" scoped>
.page {
  background: #ffffff;
  width: 100%;
  min-height: 100vh;
  .row {
    padding: 30rpx 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30rpx;
    .code {
      margin-left: 20rpx;
      .code_sms {
        color: #e4b300;
      }
    }
  }
  .btn {
    background: #3399ed;
    border-radius: 100rpx;
    width: 100%;
    padding: 30rpx;
    text-align: center;
    color: #ffffff;
    font-size: 32rpx;
  }
}
</style>
